<template>
  <div class="login-container">
    <!-- 顶部背景区域 -->
    <div class="header-section">
      <!-- 添加背景图片 -->
      <img src="../../assets/login/header.png"  alt="" class="bg-image" />
      <div class="welcome-text">
        <!-- <div class="greeting">您好，</div> -->
        <!-- <div class="subtitle">捷卓运营管理系统</div> -->
      </div>
    </div>

    <!-- 登录卡片 -->
    <div class="login-card">
      <div class="subtitle" style="text-align: center;">捷卓运营管理</div>
      <!-- 用户名/手机号输入 -->
      <div class="form-group" style="margin-top: 30px;">
        <label class="form-label">账号</label>
        <input 
          type="text" 
          v-model="formData.mobilePhone" 
          placeholder="请输入账号"
          class="form-input"
        />
      </div>

      <!-- 密码输入 -->
      <div class="form-group">
        <div class="label-row">
          <label class="form-label">密码</label>
          <span class="forgot-link" @click="openModifyPassword">忘记密码</span>
        </div>
        <input 
          :type="passwordVisual ? 'text' : 'password'" 
          v-model="formData.password" 
          placeholder="请输入密码"
          class="form-input"
        />
      </div>
      <!-- 登录按钮 -->
      <button class="login-btn" @click="onLogin">登录</button>

     

     
    </div>
  </div>
</template>

<script>
import { encrypt, setToken } from '@/utils';
import { SystemController } from '@/api';

export default {
  name: 'login',
  data() {
    return {
      passwordVisual: false,
      formData: {
        mobilePhone: undefined,
        password: undefined
      }
    }
  },
  created() {
    this.formData.mobilePhone = localStorage.getItem('userName') || ''
    this.formData.password = localStorage.getItem('password') || ''
  },
  methods: {
    onLogin() {
      
      this.login();
    },
    login(verifyParams) {
      let params = {
        loginName: this.formData.mobilePhone,
        password: encrypt(this.formData.password),
        captchaVerification: (verifyParams || {}).captchaVerification
      };
      setToken(null);
      SystemController.loginMobile(this, params, null, { showMask: false }).then(data => {
        for (let item of data.data.mobileEntryList || []) {
          if (item.extraData != null && item.extraData !== '') {
            try {
              item.extraData = JSON.parse(item.extraData);
            } catch (e) {
              item.extraData = null;
            }
          } else {
            item.extraData = null;
          }
        }
        this.$store.commit('setHomeEntryList', data.data.mobileEntryList)
        setToken(data.data.tokenData);
        this.$router.replace({ name: 'home' });
      }).catch(e => {
        console.log(e);
      });
    },
    openModifyPassword() {
      this.$router.push({ name: 'password' });
    }
  }
};
</script>

<style scoped>

.login-container {
  width: 100vw;
  min-height: 94vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  /* 确保容器可以滚动 */
  overflow-y: hidden;
  padding-bottom: 40px;
}

/* 顶部背景区域 */
.header-section {
  width: 100%;
  height: 200px;
  background: linear-gradient(180deg, #c8e3f5 0%, #e8f4fc 100%);
  padding: 40px 24px 20px;
  box-sizing: border-box;
  position: relative;
  /* 确保背景图片可以显示 */
  overflow: hidden;
  flex-shrink: 0;
}

/* 添加背景图片样式 */
.bg-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  pointer-events: none;
}

.welcome-text {
  color: #333;
  /* 确保文字在图片上方 */
  position: relative;
  z-index: 1;
}

.greeting {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 2px;
}

.subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

/* 登录卡片 */
.login-card {
  width: calc(100%);
  max-width: 500px;
  margin: -20px auto 0;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); */
  box-sizing: border-box;
  /* 确保卡片内容完全显示 */
  flex-shrink: 0;
  margin-bottom: 20px;
  z-index: 9;
  /* height: 50vh; */
}

/* 表单组 */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.forgot-link {
  font-size: 13px;
  color: #4a90e2;
  cursor: pointer;
}

.form-input {
  width: 100%;
  height: 44px;
  background: #f7f7f7;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  outline: none;
}

.form-input::placeholder {
  color: #c0c0c0;
}

.form-input:focus {
  background: #f0f0f0;
}

/* 协议勾选 */
.agreement-row {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  margin-top: 16px;
}

.checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  margin-right: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.agreement-text {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  cursor: pointer;
}

.link-text {
  color: #333;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #5ba3f5 0%, #4a8ee8 100%);
  border: none;
  border-radius: 24px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.3s;
  margin-bottom: 16px;
  letter-spacing: 3px;
}

.login-btn:hover {
  opacity: 0.9;
}

.login-btn:active {
  opacity: 0.8;
}

/* 底部链接 */
.bottom-links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.link {
  font-size: 13px;
  color: #4a90e2;
  cursor: pointer;
}

/* 其他登录方式 */
.other-login {
  text-align: center;
  /* 确保底部内容完全显示 */
  padding-bottom: 20px;
}

.divider-text {
  font-size: 13px;
  color: #999;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 32px;
  /* 确保图标容器有足够高度 */
  min-height: 60px;
  align-items: center;
}

.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
  /* 确保图标不会被裁剪 */
  flex-shrink: 0;
  overflow: hidden;
}

.social-icon:hover {
  transform: scale(1.05);
}

.social-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* 为不同社交图标添加特定背景色 */
.qq-icon {
  background: #f0f0f0;
}

.wechat-icon {
  background: #f0f0f0;
}

.weibo-icon {
  background: #f0f0f0;
}
</style>
